<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <link href="../mall/image/迪.png"rel="shortcut icon"type="image/x-icon">
  <meta charset="UTF-8">
  <title>轮播图</title>
  <link rel="stylesheet" th:href="@{/admin/element-ui/lib/theme-chalk/index.css}">
</head>
<body>
  <div id="app">
    <template>
      <el-table
          :data="tableData"
          stripe
          style="width: 100%">
        <el-table-column
            align="center"
            prop="carouselUrl"
            label="轮播图"
            width="180">
        </el-table-column>
        <el-table-column
            align="center"
            prop="redirectUrl"
            label="跳转连接"
            width="180">
        </el-table-column>
        <el-table-column
            align="center"
            width="180"
            prop="carouselRank"
            label="排序值">
        </el-table-column>
        <el-table-column
            width="180"
            align="center"
            prop="createTime"
            label="添加时间">
        </el-table-column>
      </el-table>
    </template>
  </div>
</body>
<script th:src="@{/admin/vue.js}"></script>
<script th:src="@{/admin/element-ui/lib/index.js}"></script>
<script th:src="@{/admin/jquery-3.3.1.min.js}"></script>
<script th:src="@{/admin/dateformat.js}"></script>
<script>
  new Vue({
    el : "#app",
    data(){
      return{
        tableData : [],
      }
    },
    methods : {
      getAllCarousel(){
        const _this = this;
        $.ajax({
          url : "/admin/carousel/",
          type : "GET",
          success : function (resp) {
            for (let i = 0; i < resp.length; i++) {
              resp[i].createTime = DateFormat.format(new Date(resp[i].createTime), 'yyyy-MM-dd hh:mm:ss');
            }
            _this.tableData = resp
          }
        })
      }
    },
    mounted : function (){
      this.getAllCarousel()
    }
  })
</script>
</html>